<script setup lang="ts">
import type { ZhuMember } from '../../../../types/zhu-family';

import {
  EditOutlined,
  HistoryOutlined,
  LinkOutlined,
  SafetyCertificateOutlined,
  TrophyOutlined,
} from '@ant-design/icons-vue';

import { kingdoms } from '../../../../mock/zhu-dynasty/members';

defineProps<{
  member: ZhuMember;
}>();

defineEmits<{
  (e: 'update', member: ZhuMember): void;
  (e: 'mint-sbt', member: ZhuMember): void;
}>();

function getRoleColor(role: string) {
  const colors: Record<string, string> = {
    emperor: 'gold',
    'crown-prince': 'orange',
    prince: 'blue',
    royal: 'cyan',
    noble: 'purple',
  };
  return colors[role] || 'default';
}

function getRoleText(role: string) {
  const texts: Record<string, string> = {
    emperor: '皇帝',
    'crown-prince': '太子',
    prince: '藩王',
    royal: '皇族',
    noble: '宗室',
  };
  return texts[role] || role;
}

function getKingdomName(kingdomId: string) {
  const kingdom = kingdoms.find((k) => k.id === kingdomId);
  return kingdom?.name || '未知';
}

function viewOnChain() {
  window.open(`https://scan.example.com/token/123`, '_blank');
}
</script>

<template>
  <div class="member-detail-panel">
    <div class="member-header">
      <a-avatar :src="member.avatar" :size="80" />
      <div class="member-basic">
        <h2>{{ member.name }}</h2>
        <p class="title">{{ member.title }}</p>
        <a-space>
          <a-tag :color="getRoleColor(member.role)">
            {{ getRoleText(member.role) }}
          </a-tag>
          <a-tag>第 {{ member.generation }} 代</a-tag>
          <a-tag v-if="member.hasSBT" color="green">
            <SafetyCertificateOutlined /> SBT #{{ member.sbtTokenId }}
          </a-tag>
        </a-space>
      </div>
    </div>

    <a-divider />

    <a-descriptions :column="1" bordered size="small">
      <a-descriptions-item label="性别">
        {{ member.gender === 'male' ? '男' : '女' }}
      </a-descriptions-item>
      <a-descriptions-item label="出生日期">
        {{ member.birthDate }}
      </a-descriptions-item>
      <a-descriptions-item v-if="member.deathDate" label="薨逝日期">
        {{ member.deathDate }}
      </a-descriptions-item>
      <a-descriptions-item v-if="member.reignPeriod" label="在位时期">
        {{ member.reignPeriod }}
      </a-descriptions-item>
      <a-descriptions-item label="封地/驻地">
        {{ member.fiefdom || '京师' }}
      </a-descriptions-item>
      <a-descriptions-item label="所属藩国">
        {{ getKingdomName(member.kingdomId) }}
      </a-descriptions-item>
    </a-descriptions>

    <a-divider>成就与荣誉</a-divider>

    <a-list
      v-if="member.achievements.length > 0"
      :data-source="member.achievements"
      size="small"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <TrophyOutlined style="margin-right: 8px; color: #faad14" />
          {{ item }}
        </a-list-item>
      </template>
    </a-list>
    <a-empty v-else description="暂无成就记录" />

    <a-divider />

    <a-space direction="vertical" style="width: 100%">
      <a-button
        v-if="!member.hasSBT"
        type="primary"
        block
        @click="$emit('mint-sbt', member)"
      >
        <SafetyCertificateOutlined /> 铸造身份 SBT
      </a-button>
      <a-button block @click="viewOnChain" :disabled="!member.hasSBT">
        <LinkOutlined /> 查看链上信息
      </a-button>
      <a-button block> <EditOutlined /> 编辑信息 </a-button>
      <a-button block> <HistoryOutlined /> 查看历史事件 </a-button>
    </a-space>
  </div>
</template>

<style scoped lang="scss">
.member-detail-panel {
  .member-header {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
  }

  .member-basic {
    flex: 1;

    h2 {
      margin: 0 0 4px;
    }

    .title {
      margin: 0 0 8px;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
